<template>
  <view class="form-box">
    <!--<nui-step :step="2"></nui-step>-->
    <nui-step :step="stepType"></nui-step>
    <u-form :model="form" ref="uForm">
      <u-form-item label="身份证姓名" label-width="180" prop="identity_name" required
        ><u-input v-model="form.identity_name" placeholder="请输入身份证姓名"
      /></u-form-item>
      <u-form-item label="身份证号码" label-width="180" prop="identity_number" required
        ><u-input v-model="form.identity_number" placeholder="请输入身份证号码"
      /></u-form-item>
      <u-form-item label="出生日期" label-width="180" prop="identity_date" required
        ><u-input
          type="select"
          :select-open="idateShow"
          v-model="form.identity_date"
          placeholder="请输入出生日期"
          @click="onBirHandle"
        ></u-input
      ></u-form-item>
      <u-form-item label="性别" label-width="180" prop="sex" required
        ><u-input
          type="select"
          :select-open="actionSexShow"
          v-model="form.sex"
          placeholder="请选择性别"
          @click="onSexHandle"
        ></u-input
      ></u-form-item>
      <u-form-item label="民族" label-width="180" prop="nation" required
        ><u-input
          type="select"
          :select-open="actionNationShow"
          v-model="form.nation"
          placeholder="请选择民族"
          @click="actionNationShow = true"
        ></u-input
      ></u-form-item>
      <u-form-item label="身份证地址" label-width="180" prop="identity_address" required
        ><u-input v-model="form.identity_address" placeholder="请输入身份证地址"
      /></u-form-item>
      <!-- <u-form-item label="证件有效期" label-width="180" prop="identity_end_date" required
        ><u-input
          type="select"
          :select-open="edateShow"
          v-model="form.identity_end_date"
          placeholder="请输入证件有效期"
          @click="edateShow = true"
        ></u-input
      ></u-form-item> -->
      <!-- <u-form-item label="银行卡号" label-width="180" prop="bank_number" required
        ><u-input type="number" v-model="form.bank_number" placeholder="请输入银行卡号"
      /></u-form-item>
      <u-form-item label="开户行" label-width="180" prop="bank_type" required
        ><u-input v-model="form.bank_type" placeholder="请输入开户行"
      /></u-form-item> -->
    </u-form>
    <view class="btn-box">
      <u-button type="primary" shape="square" :ripple="true" size="medium" @click="toBackPath" class="custom-btn"
        >上一步</u-button
      >
      <u-button type="primary" shape="square" :ripple="true" size="medium" @click="submit" class="custom-btn"
        >下一步</u-button
      >
    </view>
    <u-calendar v-model="idateShow" @change="changeiDate" :mode="idate_mode" safe-area-inset-bottom> </u-calendar>
    <u-action-sheet :list="actionSexList" v-model="actionSexShow" @click="actionSexCallback"></u-action-sheet>
    <u-select
      v-model="actionNationShow"
      :list="actionNationList"
      mode="single-column"
      @confirm="actionNationCallback"
    ></u-select>
    <u-calendar
      v-model="edateShow"
      @change="changeeDate"
      :mode="edate_mode"
      :max-date="'2030-01-01'"
      safe-area-inset-bottom
    >
    </u-calendar>
    <u-modal
      v-model="showModel"
      content="确认提交数据？"
      @confirm="submitData"
      @cancel="cancel"
      show-cancel-button
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { GetBirthday, Getsex } from "@/utils/index.js";
import AuthInfo from "@/utils/authInfo.js";
export default {
  data() {
    return {
      form: {
        identity_name: "", //身份证姓名
        identity_number: "", //身份证号码
        identity_date: "", //出生日期
        sex: "",
        nation: "", //民族
        identity_address: "",
        identity_end_date: "", //证件有效期
        bank_number: "", //银行卡号
        bank_type: "", //开户行
      },
      showModel: false,
      idateShow: false,
      idate_mode: "date",
      actionSexShow: false,
      actionNationShow: false,
      edateShow: false,
      edate_mode: "date",
      sexValue: "",
      nationValue: "",

      actionSexList: [],
      actionNationList: [],

      rules: {
        identity_name: [
          {
            required: true,
            message: "请输入身份证姓名",
            trigger: ["change", "blur"],
          },
        ],
        identity_number: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "身份证号码不正确",
            trigger: ["change", "blur"],
          },
        ],
        identity_date: [
          {
            required: true,
            message: "请输入出生日期",
            trigger: "change",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        nation: [
          {
            required: true,
            message: "请选择民族",
            trigger: "change",
          },
        ],
        identity_adress: [
          {
            required: true,
            message: "请输入身份证地址",
            trigger: ["change", "blur"],
          },
        ],
        // identity_end_date: [
        //   {
        //     required: true,
        //     message: "请输入证件有效期",
        //     trigger: "change",
        //   },
        // ],
        // bank_number: [
        //   {
        //     required: true,
        //     message: "请输入银行卡号",
        //     trigger: ["change", "blur"],
        //   },
        // ],
        // bank_type: [
        //   {
        //     required: true,
        //     message: "请输入开户行",
        //     trigger: ["change", "blur"],
        //   },
        // ],
      },
    };
  },
  computed: {
    ...mapGetters(["nations", "sexs", "idCardNo", "userInfo","stepType", "qrCodeId"]),
  },
  mounted() {
    this.nations.forEach((item) => {
      this.actionNationList.push({
        value: item.dictValue,
        label: item.dictLabel,
      });
    });
    this.sexs.forEach((item) => {
      this.actionSexList.push({
        value: item.dictValue,
        text: item.dictLabel,
      });
    });
    this.form.identity_number = this.idCardNo;
    this.changeSexStatus(this.idCardNo);

    this.userInfo.idCardName != "" && (this.form.identity_name = this.userInfo.idCardName);

    if (this.userInfo.nation != "") {
      this.actionNationList.forEach((item) => {
        if (item.value == this.userInfo.nation) {
          this.form.nation = item.label;
          this.nationValue = item.value;
        }
      });
    }

    this.userInfo.idCardAddress != "" && (this.form.identity_address = this.userInfo.idCardAddress);
    // this.userInfo.idCardEffectiveTerm != "" && (this.form.identity_end_date = this.userInfo.idCardEffectiveTerm);
    // this.userInfo.bankCardNo != "" && (this.form.bank_number = this.userInfo.bankCardNo);
    // this.userInfo.bankName != "" && (this.form.bank_type = this.userInfo.bankName);
    this.userInfo.bankBranch != "" && (this.form.bank_shop = this.userInfo.bankBranch);
  },
  methods: {
    submitData() {
      this.submitInfo();
      // this.$u.route("pages/step_three/index");
    },
    cancel() {
      this.showModel = false;
    },
    onBirHandle() {
      this.idateShow = true;
    },
    onSexHandle() {
      this.actionSexShow = true;
    },
    changeSexStatus(idCardNo) {
      if (idCardNo != "") {
        console.log(GetBirthday(idCardNo));
        this.form.identity_date = GetBirthday(idCardNo);
        this.form.sex = Getsex(idCardNo);
        this.sexValue = this.form.sex == "男" ? "0" : "1";
      } else {
        this.form.identity_date = "";
        this.form.sex = "";
        this.sexValue = "";
      }
    },
    toBackPath() {
      this.$u.route("pages/step_one/index");
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.showModel = true;
        } else {
          ui.showModal({
            title: "提示",
            content: "验证失败",
          });
        }
      });
    },
    async submitInfo() {
      let {
        identity_name,
        identity_number,
        identity_date,
        identity_address,
        // identity_end_date,
        // bank_number,
        // bank_type,
        bank_shop,
      } = this.form;
      let params = {
        step: "2",
        idCardName: identity_name,
        idCardNo: identity_number,
        birthDate: identity_date,
        sex: this.sexValue,
        nation: this.nationValue,
        idCardAddress: identity_address,
        // idCardEffectiveTerm: identity_end_date,
        // bankCardNo: bank_number,
        // bankName: bank_type,
        bankBranch: bank_shop,
        qrcodeId: this.qrCodeId
      };
      let res = await this.$api.riders.inductionRecord(params);
      if (res.code != 200) {
        uni.showToast({
          title: res.msg,
          icon: "error",
        });
        return;
      }
      uni.showToast({
        title: "数据已提交",
        icon: "success",
      });
      AuthInfo.checkUserStatus();
    },
    changeiDate(e) {
      this.form.identity_date = e.result;
    },
    actionSexCallback(index) {
      uni.hideKeyboard();
      this.form.sex = this.actionSexList[index].text;
      this.sexValue = this.actionSexList[index].value;
    },
    actionNationCallback(e) {
      this.form.nation = e[0].label;
      this.nationValue = e[0].value;
    },
    changeeDate(e) {
      this.form.identity_end_date = e.result;
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  padding: 20px;
}
.custom-btn {
  margin-top: 15px;
  // margin: 15px auto;
  // left: 50%;
  // transform: translateX(-50%);
}
.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
